<template>
	<div class="data-reflux">
		<!-- 数据列表 -->
		<div class="search-box">
			<div class="left-search">
				<a-select
					ref="select"
					v-model:value.trim="aiSrvTypeList"
					style="width: 216px"
					:options="AIServiceList"
					class="AI-serviceList"
					:class="[aiSrvTypeList.length && 'active']"
					mode="multiple"
					max-tag-count="responsive"
					placeholder="AI服务"
					allow-clear
					@change="handleSearch('aiSrvTypeList')"
				></a-select>
				<a-tree-select
					v-model:value="cameraTreeList"
					:tree-data="cameraTreeData"
					:dropdown-match-select-width="dropdownMatchSelectWidth"
					class="select-item"
					:class="[cameraTreeList.length && 'active']"
					max-tag-count="responsive"
					allow-clear
					tree-checkable
					:field-names="{
						children: 'children',
						label: 'name',
						value: 'id'
					}"
					tree-node-filter-prop="name"
					:show-checked-strategy="SHOW_PARENT"
					placeholder="场景区域/摄像头"
					@change="changeCameraTreeList"
				></a-tree-select>
				<a-select
					v-model:value="tableAttr.searchObj.model"
					class="select-item"
					:class="[tableAttr.searchObj.model && 'ant-select-focused']"
					placeholder="回流策略"
					:options="refluxStrategyList"
					allow-clear
					:show-search="false"
					show-arrow
					@change="setTableData(true)"
				>
				</a-select>
				<div class="time-part">
					<ul class="select-list">
						<li
							:key="item.value"
							v-for="(item, index) in presetTime"
							class="select-list-item"
							:class="[activeTimeIndex === index && 'active']"
							@click="changeTime(index, item.value)"
						>
							{{ item.text }}
						</li>
					</ul>
					<a-range-picker
						format="YYYY-MM-DD HH:mm"
						class="range-picker"
						value-format="YYYY-MM-DD HH:mm"
						:value="[startTime, endTime]"
						show-time
						:class="[startTime && 'active']"
						:placeholder="['开始时间', '结束时间']"
						input-read-only
						@calendar-change="changeRangePicker"
					>
						<template #suffixIcon> <clock-circle-outlined></clock-circle-outlined></template
					></a-range-picker>
				</div>
			</div>

			<div id="taskBtnID" ref="taskListBtnRef" class="task-list-btn" @click="taskOpenBtn">
				<div v-if="taskStore.taskDataList.length" class="task-list-num">{{ taskStore.taskDataList.length }}</div>
				<global-svg-icon icon-name="icon-tasklist-line" width="16px" height="16px"></global-svg-icon>
			</div>

			<div class="reset" @click="reset">
				<div>
					<global-svg-icon icon-name="reset" style="margin-right: 10px" width="14px" height="14px"></global-svg-icon>
					重置
				</div>
			</div>
		</div>
		<div class="content" tabindex="0" @blur="cardBlur">
			<vue-scroll style="height: 100%; flex: 1" @handle-scroll="handlePageScroll">
				<a-spin :spinning="tableAttr.loading" class="loading">
					<div v-if="tableAttr.data?.length === 0" class="no-data">
						<global-svg-icon icon-name="empty" width="200px" height="72px" style="color: #4e596a"></global-svg-icon>
					</div>
					<a-checkbox-group
						v-else
						v-model:value="checkedList"
						:class="['card-wrap', { 'card-wrap--loading': tableAttr.loading }]"
						@change="onCheckboxGroupChange"
					>
						<div class="card-list">
							<label
								:id="`card-list-item-${item.id}`"
								:key="item.id"
								v-for="(item, index) in tableAttr.data"
								:for="isOpenSelect ? item.id : ''"
								class="card-list-item"
								:class="[isOpenSelect && 'checked', cardSelectId === item.id && 'select', { lastLine: (index + 1) % 8 == 0 }]"
								@click.stop="previewData(index)"
							>
								<div class="img-wrap">
									<img
										class="lazyload"
										:src="item.firstFrameImageUrl || defaultImage"
										:onerror="
											(e: any) => {
												e.target.src = defaultImage;
												e.target.onerror = null;
											}
										"
									/>
								</div>
								<div class="info-box">
									<div class="ai-item" @click.stop>
										<div :class="[item.alarmName && 'title-alarmName']">{{ item.alarmName ? item.alarmName : '-' }}</div>

										<div class="title-time">
											{{ item.startTime }}至{{ item.endTime.split(' ', 2).length > 1 ? item.endTime.split(' ', 2)[1] : '' }}
										</div>
									</div>
									<div class="info-item mt4">
										<global-svg-icon
											icon-name="location"
											width="12px"
											height="12px"
											style="margin-right: 4px; vertical-align: baseline"
										></global-svg-icon>
										{{ item.areaLinkName }}
									</div>
									<div class="info-item">
										<global-svg-icon
											icon-name="camera-fill"
											width="12px"
											height="12px"
											style="margin-right: 4px; vertical-align: baseline"
										></global-svg-icon>
										{{ item.deviceName }}
									</div>
								</div>
								<div v-show="isOpenSelect" class="right-top" @click.stop>
									<a-checkbox :id="'' + item.id" :value="item.id"></a-checkbox>
								</div>
							</label>
						</div>
					</a-checkbox-group>
				</a-spin>
			</vue-scroll>
		</div>

		<div class="suspend">
			<div v-if="isOpenSelect" class="suspend-operate">
				<div class="suspend-operate-select">
					<a-checkbox v-model:checked="checkAll" :indeterminate="indeterminate" @change="handleCheckAll">全选本页</a-checkbox>
					<span></span>
					<p :style="{ color: checkedList.length > 0 ? 'rgba(240, 246, 252, 1)' : 'rgba(48, 93, 194, 1)' }">
						已选中{{ checkedList.length }}条
					</p>
				</div>
				<span class="export-line"></span>
				<div class="suspend-operate-btns">
					<a-button class="btn" :disabled="checkedList.length === 0 || exportDisabled" @click="exportSelect"
						><upload-outlined class="btn-icon"></upload-outlined>导出
					</a-button>
				</div>
			</div>
			<div class="suspend-pagination">
				<a-button type="default" class="icon-button" :class="[!isOpenSelect && 'icon-select-button']" @click="handleOpenSelect">
					<global-svg-icon
						v-if="isOpenSelect"
						icon-name="arrow-down-s-line"
						width="16px"
						height="16px"
						style="margin-right: 6px"
					></global-svg-icon>
					<global-svg-icon v-else icon-name="icon-wrapper" width="16px" height="16px" style="margin-right: 6px"></global-svg-icon>

					选择
				</a-button>
				<div class="pagination">
					<global-pagination
						:current="tableAttr.current"
						:page-size="tableAttr.pageSize"
						:total="tableAttr.total"
						:page-size-options="['20']"
						@change="onPaginationChange"
					></global-pagination>
				</div>
			</div>
		</div>

		<preview-video ref="previewVideoRef" @toggle="(id: number | null) => (cardSelectId = id)"></preview-video>
		<task-list-bar v-model:visible="taskListBarVisible" :button-id="'taskBtnID'"></task-list-bar>
	</div>
</template>

<script lang="ts" setup>
import PreviewVideo from '../../../components/data-reflux/PreviewVideo.vue';
import { TreeSelect } from 'ant-design-vue';
import { g6UseTable } from 'glasssix-vue3-hooks';
import { DataRefluxApi, CameraManagementAPI, commonTaskApi } from '../../../api';
import { TsSelectOptItem } from '../../../type';
import { arr2Str } from '@/global-utils/base.utils';
import defaultImage from '@/global-assets/imgs/img-none.png';
import taskListBar from './task-list-bar.vue';
import { useTaskStore } from '@/global-store/task';

import dayjs from 'dayjs';

const taskStore = useTaskStore();
const $message: any = inject('$message');

const cameraTreeList = ref([]);
const cameraTreeData = ref<any>([]);
const refluxStrategyList = reactive([
	{
		value: 0,
		label: '算法报警回流'
	},
	{
		value: 1,
		label: '录像回流'
	}
]);

const dropdownMatchSelectWidth = ref<number>(500);
const mAreaIdList = ref<any>([]);
const areDeviceIdList = ref<string[]>([]);
const previewVideoRef = ref();
const SHOW_PARENT = TreeSelect.SHOW_PARENT;

/**
 * 选中的列表
 */
const checkedList = ref<any[]>([]);
const checkAll = ref<boolean>(false);
const isOpenSelect = ref<boolean>(false);
let indeterminate = ref<boolean>(true);
const watchStop = watch(
	() => checkedList.value,
	() => {
		indeterminate.value = !!checkedList.value.length && checkedList.value.length < tableAttr.data.length;
		console.log('indeterminate:', indeterminate.value);
	}
);
const handleOpenSelect = (): void => {
	isOpenSelect.value = !isOpenSelect.value;
	checkedList.value = [];
	checkAll.value = false;
};
// 选择事件
const onCheckboxGroupChange = (checkedList: any[]): void => {
	isOpenSelect.value = true;
	checkAll.value = checkedList.length === tableAttr.data.length;
	// 未选中任何一个时不展示底部操作栏
	if (checkedList.length === 0) {
		isOpenSelect.value = false;
	}
};
// 全选、反选
const handleCheckAll = (e: any): void => {
	checkAll.value = e.target.checked;
	if (checkAll.value) {
		checkedList.value = tableAttr.data.map((item: any) => item.id);
	} else {
		checkedList.value = [];
	}
};

const exportDisabled = ref<boolean>(false);
const exportSelect = async () => {
	exportDisabled.value = true;
	try {
		// 添加加入队列接口
		let params = {
			recordIdList: checkedList.value,
			retryMark: 0,
			pageType: 1
		};
		let res: any = await commonTaskApi.exportPrepare(params);
		exportDisabled.value = false;
		isOpenSelect.value = false;
		checkedList.value = [];
		checkAll.value = false;
		await taskStore.getTaskList();
		console.log(res, 'res');

		if (res.code === 0) {
			$message.info('已加入导出任务队列， 请前往任务栏查看！');
			taskStore.getTaskList();
		}
	} catch (error) {
		exportDisabled.value = false;
	}
};

const { tableAttr, setTableData, setTablePagination } = g6UseTable(DataRefluxApi.list, { pageSize: 20 });

// AI服务下拉数据
const aiSrvTypeList = ref<string[]>([]);
const AIServiceList = ref<TsSelectOptItem[]>([]);

const getAIServiceList = async (): Promise<void> => {
	let { data } = await CameraManagementAPI.AIServiceList();
	AIServiceList.value = data;
};

// 预设时间段
const presetTime = ref<any>([
	{
		text: '今日',
		value: 1
	},
	{
		text: '近7天',
		value: 7
	},
	{
		text: '近30天',
		value: 30
	}
]);

const activeTimeIndex = ref<number>(0);
const headerBottomBorderColor = ref('transparent');

const handlePageScroll = (vertical: Record<string, any>): void => {
	headerBottomBorderColor.value = vertical.scrollTop > 10 ? '#20305b' : 'transparent';
};
// ===================卡片选中===================
const cardSelectId = ref<number | null>(null);

// 失去焦点 清空选中
const cardBlur = () => {
	if (!previewVideoRef.value.getVisible()) {
		cardSelectId.value = null;
	}
};
// ===================卡片选中 END===================
// 设备筛选不用禁用离线设备
const noDisableDevice = (tree: any[]) => {
	tree.forEach((node: { disabled: boolean; children: string | any[] }) => {
		node.disabled = false;
		if (node.children) {
			if (node.children.length > 0) {
				noDisableDevice(node.children as any[]);
			}
		}
	});
	return tree;
};

const getDeviceList = async (): Promise<void> => {
	let { data } = await DataRefluxApi.getDeviceList();
	cameraTreeData.value = noDisableDevice(data);
};
const previewData = (index: number) => {
	previewVideoRef.value?.openModal(tableAttr.data, index);
};

// 递归筛选
const findObjectById = (data: any, id: string): any => {
	for (let i = 0; i < data.length; i++) {
		const obj = data[i];
		if (obj.id === id) {
			return obj;
		}
		if (obj.children && obj.children.length > 0) {
			const result = findObjectById(obj.children, id);
			if (result) {
				return result;
			}
		}
	}
	return null;
};
const flatten = (data: any): any => {
	return data.reduce((prev: any, cur: any) => {
		prev.push({ areaOrDeviceId: cur.areaOrDeviceId, name: cur.name });
		if (cur.children) {
			prev.push(...flatten(cur.children));
		}
		return prev;
	}, []);
};

// 查询
const handleSearch = (key?: string): void => {
	console.log(key);
	switch (key) {
		case 'mAreaOrDeviceIdList':
			tableAttr.searchObj.mAreaIdList = arr2Str(mAreaIdList.value);
			tableAttr.searchObj.areDeviceIdList = arr2Str(areDeviceIdList.value);
			break;
		case 'aiSrvTypeList':
			tableAttr.searchObj.aiSrvTypeList = arr2Str(aiSrvTypeList.value);
			break;
		default:
			break;
	}
	setTableData(true);
};
// 场景区域/摄像头的值改变时
const changeCameraTreeList = (value: any): void => {
	mAreaIdList.value = [];
	areDeviceIdList.value = [];

	value.forEach((item: any) => {
		const re = findObjectById(cameraTreeData.value, item);

		// type为1时代表选择区域,则把区域id和摄像头id都传入
		if (re.type === 1) {
			console.log('re:', re);

			const flatData = flatten(re.children ? re.children : [re]);
			if (re.children) {
				flatData.forEach((i: any) => {
					areDeviceIdList.value.push(i.areaOrDeviceId);
				});
			}
			mAreaIdList.value.push(re.areaOrDeviceId);
		}
		// type为0时代表选择摄像头，只传摄像头id
		if (re.type === 0) {
			areDeviceIdList.value.push(re.areaOrDeviceId);
		}
	});

	handleSearch('mAreaOrDeviceIdList');
};
/* ------------------- 处理时间选择逻辑 ------------------ */
// 时间过滤
const startTime = ref<any>();
const endTime = ref<any>();
// 根据传入的天数，获取以当前时间基准的时间范围
const GetTimeRange = (day: number, init: boolean = true): void => {
	const createBegin = dayjs()
		.subtract(day - 1, 'days')
		.startOf('day')
		.format('YYYY-MM-DD HH:mm:ss');
	const createEnd = dayjs().endOf('day').format('YYYY-MM-DD HH:mm:ss');

	tableAttr.searchObj.startTime = createBegin;
	tableAttr.searchObj.endTime = createEnd;
	startTime.value = undefined;
	endTime.value = undefined;
	tableAttr.current = 1;
	if (init) {
		handleSearch();
	}
};
const changeRangePicker = (dates: any, date: string[]): void => {
	activeTimeIndex.value = -1;
	if (date && date.length) {
		if (date[0] !== '') {
			tableAttr.searchObj.startTime = `${date[0]}:00`;

			startTime.value = `${date[0]}`;
		}
		if (date[1] !== '') {
			tableAttr.searchObj.endTime = `${date[1]}:59`;
			endTime.value = `${date[1]}`;
		}
		if (date[0] === '' && date[1] === '') {
			activeTimeIndex.value = 0;
			GetTimeRange(7);

			tableAttr.searchObj.startTime = undefined;
			tableAttr.searchObj.endTime = undefined;
			startTime.value = undefined;
			endTime.value = undefined;
		}

		tableAttr.current = 1;
		handleSearch();
	}
};
const changeTime = (index: number, day: number): void => {
	// 如果是同一天不搜索
	if (index === activeTimeIndex.value) {
		return;
	}
	activeTimeIndex.value = index;

	GetTimeRange(day);
};
// 分页处理
const onPaginationChange = (page: number, pageSize: number): void => {
	// 重置被选项
	document.querySelector('.card-wrap')?.scrollTo(0, 0);
	setTablePagination(page, pageSize);
};

//任务队列
const taskListBarVisible = ref<boolean>(false);
const taskListBtnRef = ref<HTMLElement>();

// 打开任务卡片
const taskOpenBtn = () => {
	if (!taskListBarVisible.value) {
		taskStore.getTaskList();
	}
	taskListBarVisible.value = !taskListBarVisible.value;
};

const reset = () => {
	if (tableAttr.loading) {
		return;
	}
	tableAttr.searchObj = {};
	tableAttr.searchObj.model = [];
	cameraTreeList.value = [];
	activeTimeIndex.value = 0;
	GetTimeRange(1, false);
	setTableData(true);
};

onMounted(() => {
	GetTimeRange(1, false);
	getAIServiceList();
	getDeviceList();
	setTableData();
	taskStore.getTaskList();
});
onUnmounted(() => {
	watchStop();
});
</script>

<style lang="less" scoped>
.data-reflux {
	position: relative;
	display: flex;
	overflow: hidden;
	height: 100%;
	color: @text01;
	flex-direction: column;
}

.search-box {
	box-sizing: border-box;
	display: flex;
	min-height: 44px;
	padding: 0 32px;
	align-items: center;
	justify-content: space-between;

	.left-search {
		display: flex;
		align-items: center;
		gap: 12px;

		.select-item {
			width: 180px;

			&.active {
				width: 285px;
			}
		}

		.time-part {
			display: flex;
			margin-left: 20px;

			.select-list {
				display: flex;
				// width: 280px;
				height: 36px;
				margin: 0 8px 0 0;
				border: 1px solid @mask02;
				border-radius: 6px;
				padding: 3px 0;
				font-size: 14px;
				line-height: 22px;
				color: @text02;
				flex-shrink: 0;

				.select-list-item {
					position: relative;
					width: 87px;
					margin: 0 3px;
					border-radius: 4px;
					padding: 3px 0;
					text-align: center;
					// line-height: 36px;
					cursor: pointer;

					&.active {
						color: @text01;
						background: @primary01;

						&:hover {
							background: @primary02 !important;
						}

						&:active {
							background: @primary03 !important;
						}
					}
					// 分割线
					&::after {
						position: absolute;
						top: 50%;
						right: -6px;
						width: 1px;
						height: 14px;
						margin-right: 3px;
						background: @borderColor02;
						transform: translateY(-50%);
						content: '';
					}

					&:last-child {
						&::after {
							display: none;
						}
					}
				}
			}

			.range-picker {
				width: 216px;
				flex-shrink: 0;

				svg {
					color: red;
				}

				&.active {
					width: 308px;
				}
			}
		}
	}

	.reset {
		display: flex;
		flex-direction: column;
		justify-content: center;
		color: @text03;
		cursor: pointer;
	}
}

.no-data {
	display: flex;
	height: calc(100vh - 152px - 92px - 48px);
	justify-content: center;
	padding-top: 180px;
}

.content {
	overflow: auto;
	width: 100%;
	padding-left: 32px;
	outline: none;
	flex: 1;

	&--loading {
		height: calc(100vh - 152px - 92px - 48px);
	}

	.card-wrap {
		flex: 1;

		.ant-spin-nested-loading {
			position: absolute;
			top: 12px;
			width: 100%;
			height: 100%;

			.ant-spin-dot {
				margin: 0;
			}
		}

		:deep(.ant-checkbox-inner) {
			border-color: rgba(217, 217, 219, 1) !important;
			background-color: @white !important;
		}

		:deep(.ant-checkbox-checked) {
			.ant-checkbox-inner {
				background: @primary01 !important;
			}
		}

		.card-list {
			display: grid;
			// overflow: hidden !important;
			width: 100%;
			height: 100%;
			padding-right: 32px;
			padding-bottom: 80px;
			grid-template-columns: repeat(5, 1fr);
			grid-template-rows: repeat(2, 1fr);
			grid-column-gap: 8px;
			/* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
			grid-row-gap: 8px;

			.lastLine {
				margin-right: 0;
			}

			.card-list-item {
				position: relative;
				min-width: 300px;
				max-width: 191px;
				border: 1px solid transparent;
				padding: 8px;
				cursor: pointer;

				.img-wrap {
					width: 100%;
					height: 191px;
					min-height: 133px;
					max-height: 191px;

					> img {
						width: 100%;
						height: 100%;
						object-fit: cover;
						border-radius: 4px;
					}
				}

				.info-box {
					overflow: hidden; /* 隐藏超出容器的内容 */
					white-space: nowrap; /* 防止换行 */
					text-overflow: ellipsis; /* 当文字超出容器时显示省略号 */
					color: @text03;

					.ai-item {
						display: flex;
						margin-top: 6px;
						font-size: 12px;
						line-height: 20px;
						color: @text01;
						justify-content: space-between;

						.title-alarmName {
							border-radius: 4px;
							padding: 0 6px;
							font-family: 'Alimama FangYuanTi VF';
							font-size: 12px;
							font-weight: 500;
							font-style: normal;
							line-height: 20px; /* 166.667% */
							color: @text01;
							background: @secondary03;
							text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
						}

						.title-time {
							// width: 162px;
							font-size: 14px;
							font-weight: 400;
							font-style: normal;
							line-height: 22px; /* 157.143% */
							text-align: center;
							color: @text01;
						}

						.ai-alarm-name {
							border-radius: 4px;
							padding: 0 6px;
							font-family: 'Alimama FangYuanTi VF';
							line-height: 20px;
							background: @secondary03;
							text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
						}

						.sence-name {
							line-height: 20px;
						}
					}

					.info-item {
						display: flex;
						line-height: 20px;
						color: @text03;
						align-items: center;
					}

					.mt4 {
						margin-top: 4px;
					}

					.time-item {
						margin-top: 4px;
						line-height: 20px;
						color: @text04;
					}
				}

				.tag {
					margin-left: auto;
					border: 1px solid rgba(0, 0, 0, 0.12);
					border-radius: 4px;
					padding: 0 6px;
					font-size: 12px;
					white-space: nowrap;
					color: #d67900;
					background: rgba(245, 151, 0, 0.12);
				}

				&.select {
					border: 1px solid #3d7fe9;
					border-radius: 6px;
					background: rgba(26, 111, 243, 0.4);
				}

				&:hover,
				&.checked {
					border: 1px solid #374b79;
					border-radius: 8px;
					background: radial-gradient(66.29% 107.13% at 0% 0%, rgba(38, 62, 131, 0.12) 0%, rgba(217, 217, 217, 0.02) 100%), #0f224e;
					box-shadow: 0 3px 16px 0 rgba(0, 0, 0, 0.25);

					.right-top {
						display: block !important;
					}

					&::before {
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						content: '';
					}
				}

				.right-top {
					position: absolute;
					top: 6px;
					right: 8px;

					.ant-checkbox-inner {
						background: #fff !important;
					}
				}
			}
		}
	}
}

.suspend {
	box-sizing: content-box;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 9;
	width: 100%;
	border-top: 1px solid @borderColor01;
	border-bottom-right-radius: 8px;
	border-bottom-left-radius: 8px;
	background: @background02;
	box-shadow:
		0 -1px 3px rgba(37, 37, 45, 0.14),
		0 -2px 8px rgba(37, 37, 45, 0.14);

	.suspend-operate {
		display: flex;
		align-items: center;
		height: 48px;
		border-bottom: 1px solid @borderColor01;
		padding-left: 24px;

		.suspend-operate-select {
			display: flex;
			align-items: center;
			padding-right: 24px;

			:deep(.ant-checkbox) .ant-checkbox-input {
				opacity: 0 !important;
			}

			:deep(.ant-checkbox-wrapper) {
				span {
					color: @text01 !important;
				}
			}

			p {
				font-size: 14px;
				font-weight: 400;
				color: @primary01;
			}

			span {
				display: block;
				width: 1px;
				height: 20px;
				margin: 0 24px;
				background: @borderColor02;
			}
		}

		.export-line {
			display: block;
			width: 1px;
			height: 38px;
			margin: 0 24px;
			background: @borderColor02;
		}

		.suspend-operate-btns {
			display: flex;
			height: 100%;
			padding-left: 24px;
			align-items: center;
			gap: 0 12px;

			.icon-button {
				display: flex;
				align-items: center;
			}
		}
	}

	.suspend-pagination {
		display: flex;
		height: 48px;
		padding: 0 24px;
		color: @text01;
		align-items: center;
		box-shadow: 0 -1px 8px 0 rgba(0, 0, 0, 0.25);

		.pagination {
			margin: 0 auto;
			margin-top: -10px;
		}

		.icon-select-button {
			background-color: rgba(0, 0, 0, 0.1);
		}
	}
}

.task-list-btn {
	position: absolute;
	right: 120px;
	display: flex;
	width: 30px;
	height: 30px;
	margin-bottom: 4px;
	border: 1px solid #4b5266;
	border-radius: 8px;
	padding: 5px;
	color: #fff;
	color: @text02;
	background: rgba(255, 255, 255, 0.08);

	/* 淡阴影/淡SS */
	box-shadow: 0 1px 2px 0 rgba(2, 36, 59, 0.03);
	cursor: pointer;
	justify-content: center;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;

	.task-list-num {
		position: absolute;
		height: 16px;
		border: 1px solid #f6aca2;
		border-radius: 100px;
		padding: 0 6px;
		font-size: 12px;
		color: #fff;
		background: #fa7260;
		transform: translate(calc(100% - 4px), -58%);
	}
}
</style>
